<template>
    <view class="wai">
        <view class="top">
            <view class="top-list">
                <view>店铺名称</view>
                <!-- <input class="input" v-model="name" type="text" /> -->
                <view class="">{{ backend.shop?.name }}</view>
            </view>
            <view class="top-list">
                <view>联系人</view>
                <view class="">{{ backend.shop?.contact }}</view>
            </view>
            <view class="top-list">
                <view>联系电话</view>
                <view class="">{{ backend.shop?.mobile }}</view>
            </view>
            <!--       <view class="top-list">
                <view>身份证号</view>
                <input class="input" placeholder="37091619860214698x" type="text" />
            </view> -->
            <view class="top-list">
                <view>店铺地址</view>
                <view class="">{{ backend.shop?.address }}</view>
            </view>
        </view>
        <view class="top-list list2">
            <view>收款姓名</view>
            <input v-model="realBank.account_name" class="input" placeholder="请输入收款姓名" type="text" />
        </view>
        <view class="top-list list2">
            <view>银行姓名</view>
            <input v-model="realBank.account_header" class="input" placeholder="请输入银行姓名" type="text" />
        </view>
        <view class="top-list list2">
            <view>银行卡号</view>
            <input v-model="realBank.account_no" class="input" placeholder="请输入银行卡号" type="text" />
        </view>
        <view @click="addfenlei" class="top-list list2">
            <view>添加商品分类</view>
        </view>
        <view @click="topaixu" class="top-list list2">
            <view>商品分类排序</view>
        </view>
        <!-- 店铺logo -->
        <view class="shop-logo">
            <view>店铺logo</view>
            <view class="tu">
                <view class="flex-list">
                    <image class="img" :src="backend.shop?.logo" mode=""></image>
                    <!-- <image class="ch" src="@/static/ch.png" mode=""></image> -->
                </view>
            </view>
        </view>
        <view class="shop-logo">
            <view>营业执照</view>
            <view class="tu">
                <view class="flex-list">
                    <image class="img" :src="backend.shop?.license" mode=""></image>
                    <!-- <image class="ch" src="@/static/ch.png" mode=""></image> -->
                </view>
            </view>
        </view>
        <view class="btn" @click="btnClick">确定</view>
    </view>
</template>

<script setup>
import { getshopbk, getBank, accountSave } from '@/api/index.js';
import { utils } from '@/utils/utils.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const backend = ref({}); //商铺后台数据
const realBank = ref({}); //银行账号信息
onLoad(() => {
    getBackend();
    getBanks();
});
// 点击保存银行信息、
const btnClick = async () => {
    const parms = ref({
        account_name: realBank.value.account_name,
        account_header: realBank.value.account_header,
        account_no: realBank.value.account_no,
        type: 'bank'
    });
    if (parms.value.account_name == '') return utils('收款姓名不能为空');
    if (parms.value.account_header == '') return utils('银行姓名不能为空');
    if (parms.value.account_no.length < 16) return utils('请输入正确的银行账号');
    const ret = await accountSave(parms.value);
    if (ret.code == 1) {
        getBackend();
        getBanks();
        utils(ret.msg);
    } else {
        utils(ret.msg);
    }
    console.log('参数', parms.value);
};
// 获取商铺后台
const getBackend = async () => {
    const ret = await getshopbk();
    console.log(ret);
    if (ret.code == 1) {
        backend.value = ret.data;
        console.log(888, backend.value);
    } else {
        utils();
    }
};
const getBanks = async () => {
    const ret = await getBank();
    console.log(ret);
    if (ret.code == 1) {
        realBank.value = ret.data;
        console.log(999, realBank.value);
    } else {
        utils();
    }
};
// 点击跳转商品排序
const topaixu = () => {
    uni.navigateTo({
        url: '/pages/sub/dragSort'
    });
};
// 点击跳转添加商品分类
const addfenlei = () => {
    uni.navigateTo({
        url: '/pages/sub/addfenlei'
    });
};
</script>

<style lang="scss" scoped>
.wai {
    .btn {
        color: #ffffff;
        background: #ff9b29;
        border-radius: 50rpx;
        width: 702rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        margin-left: 24rpx;
    }
    // 店铺logo
    .shop-logo {
        .tu {
            .flex-list {
                .ch {
                    position: absolute;
                    top: 9rpx;
                    right: 10rpx;
                    width: 48rpx;
                    height: 48rpx;
                }
                .img {
                    width: 200rpx;
                    height: 200rpx;
                    margin-top: 18rpx;
                    margin-right: 30rpx;
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                }
                position: relative;
            }
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        background: #ffffff;
        padding: 34rpx 30rpx 32rpx;
        margin-bottom: 30rpx;
    }
    .top-list {
        .input {
            text-align: end;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 120rpx;
        background-color: #fff;
        border-bottom: 2rpx solid #f2f2f2;
    }
    .list2 {
        padding: 0 30rpx;
        margin: 20rpx 0;
    }
    .top {
        width: 750rpx;
        background: #ffffff;
        padding: 0 30rpx;
    }
    min-height: 100vh;
    background-color: #f7f7f7;
    padding-bottom: 50rpx;
}
</style>
